<template>
	<view class="tab_wrap">
		<scroll-view :scroll-x="true" class="top_wrap"  :style="{'background-color': options.top_backgroundcolor}">
			<view 
			:class="defaultIndex===index?'top_item_active' :'top_item'" 
			:style="{'color':defaultIndex===index?  options.top_itemselectcolor:  options.top_itemcolor }"
			v-for="(item,index) in tabItem" :key="index" @click="handleTabItem(index)">
				{{item.name}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"topTabbar",
		data() {
			return {
				defaultIndex: 0
			};
		},
		props: {
			tabItem: {
				type: Array,
				default: []
			},
			options:{
				type:Object,
				default:{
					top_backgroundcolor:'#e64d3a',
					top_itemcolor:'#000000',
					top_itemselectcolor:'#ffffff'
				}
			}
		},
		methods:{
			handleTabItem(index){
				this.defaultIndex = index
				this.$emit('tabItemClick',{index:this.tabItem[index].id})
			},
			start:function(){
				console.log("初始化")
			}
		},
		onLoad(){
			this.start();
		}
	}
</script>

<style scoped lang="scss">
 .tab_wrap{
 	width: 100%;
 	height: 80rpx;
 	::-webkit-scrollbar {
 	  width: 0;
 	  height: 0;
 	  color: transparent;
 	}
 	.top_wrap {
 		width: 100%;
 		height: 80rpx;
 		display: flex;
 		justify-content: space-evenly;
 		white-space: nowrap;
 	
 		.top_item {
 			margin: 0 25rpx;
 			height: 100%;
 			text-align: center;
 			line-height: 80rpx;
 			display: inline-block;
 			font-size: 25rpx;
 			font-weight: 400;
 		}
 	
 		.top_item_active {
 			height: 100%;
 			margin: 0 25rpx;
 			text-align: center;
 			line-height: 80rpx;
 			display: inline-block;
 			font-size: 28rpx;
 			font-weight: 600;
 		}
 	}
 }
</style>